<template>
	<view class="bot-wrap">
		<uni-popup @change="change" ref="popupshop" type="bottom" :animation="true" :durationAnim="250">
			<view class="popup-content detail-body" :style="{height:'80vh'}">
				<view class="vrow flex-end">
					<uni-icons type="closeempty" size="24" @click="show = false" color="#999"></uni-icons>
				</view>
				<view class="pop-top" id="pop-top">
				</view>
				<scroll-view class="pop-scroll" scroll-y>
					<view class="scroll-wrap" id="scroll-wrap">
						<view>
							 <image :src="formData.item.image" mode="aspectFill" class="big-img"/>
						</view>
						<view>
							<view class="f50">
							    <text class="li-txt">{{ formData.item.name }}</text>
							</view>
							<!-- <view class="gray f26">商品介绍内容商品介绍</view> -->
							<view class="vrow flex-between">
								<view class="red f40 blod">¥{{ formData.item.price }}</view>
								<view class="gray f34" v-if="formData.item.stockQuantity">还剩{{ formData.item.stockQuantity }}件</view>
							</view>
							<view class="line"></view>
							<view class="detail-msg">
								<view class="mb20">{{ formData.item.description }}</view>
								<view>
									 <image v-for="(item, i) in images" :src="item" :key="i" mode="widthFix" class="big-img mb50"/>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="footer-btns" v-if="formData.item.stockQuantity > 0">
				 <view class="bigbtn" @click="goBuy">加入购物车</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {baseUrl} from '@/pages/common/js/http.js'
	import {SelectListFile} from '@/pages/common/api.js'
	export default {
		data () {
			return {
				show: false,
				formData: {},
				images: []
			}
		},
		watch: {
			show: {
				handler: function(val) {
					wx.nextTick(()=>{
			            this.$refs.popupshop[this.show ? 'open' : 'close']()
					})
				},
				immediate: true
			},
		},
		methods: {
			showDetail(row) {
				console.log(row)
				this.formData = Object.assign({}, row)
				this.images = []
				this.loadImgs()
				this.show = true
			},
			loadImgs () {
				let basePath = baseUrl()
				SelectListFile({
					refId: this.formData.item.id
				}).then(res => {
					console.log('SelectListFile', res)
					if (res.code === 20000) {
						this.images = res.data.filter(d => d.type == 'productList').map(d => {
							return `${basePath}/file/download?id=${d.id}`
						})
					}
				})
			},
			goBuy () {
				 this.$emit('onChange', this.formData)
				this.formData.item.selected = (this.formData.item.selected || 0) + 1
				 console.log('this.formData', this.formData)
				 this.show = false
			},
			change(e){
			    this.show = e.show
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bot{
	    &-wrap{
	        position: relative;
	        position: fixed;
	        bottom: 0;
	        left: 0;
	        right: 0;
	        border: 0;
	        z-index: 200;
	    }
	}
	.pop{
	    &-top{
	        padding-bottom: 30rpx;
	    }
	    &-scroll{
	        width: 100%;
	        box-sizing: border-box;
	        height: 100%;
	        flex: 1;
	        overflow: hidden;
	    }
	    
	}
    .popup-content{
		z-index: 999;
        background-color: rgba($color: #fff, $alpha: 1.0);
        max-height: calc(80vh);
        min-height: calc(30vh);
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 20rpx 20rpx 0 0;
        overflow: hidden;
    }
	.detail-body {
		padding: 30rpx;
	}
	.big-img {
		width: 100%;
		height: 400rpx;
		border-radius: 16rpx;
	}
	.footer-btns {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 30rpx;
	}
	.bigbtn {
		color: #fff;
		background-color: rgb(221, 94, 86);
		border-radius: 16rpx;
		width: 60%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: 700;
		font-size: 36rpx;
	}
</style>
